import React, { Component } from 'react'
import ReactDOM from 'react-dom'

// 类式组件
// class Demo extends Component {

//   state = { count: 0 }

//   myRef = React.createRef()

//   add = () => {
//     this.setState(state => ({ count: state.count + 1 }))
//   }

//   componentDidMount() {
//     setInterval(() => {
//       this.setState(state => ({ count: state.count + 1 }))
//     }, 1000)
//   }

//   unmount() {
//     ReactDOM.unmountComponentAtNode(document.getElementById('root'))
//   }

//   show = () => {
//     alert(this.myRef.current.value)
//   }

//   render() {
//     return (
//       <div>
//         <input type="text" ref={this.myRef} />
//         <h2>当前求和为：{this.state.count}</h2>
//         <button onClick={this.add}>点我+1</button>
//         <button onClick={this.unmount}>点我卸载</button>
//         <button onClick={this.show}>点我展示</button>
//       </div>
//     )
//   }
// }

// 函数式组件
function Demo() {
  console.log('Demo');

  const [count, setCount] = React.useState(0)
  console.log(count, setCount);

  const [name, setName] = React.useState('Tom')

  const myRef = React.useRef()

  React.useEffect(() => {
    console.log('@');
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])


  function add() {
    // setCount(count + 1) // 第一种写法
    setCount(count => count + 1)
  }

  function changeName() {
    setName('Jack')
  }

  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  function show() {
    alert(myRef.current.value)
  }

  return (
    <div>
      <input type="text" ref={myRef} />
      <h2>当前求和为：{count}</h2>
      <h2>我的名字是：{name}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={changeName}>点我改名</button>
      <button onClick={unmount}>点我卸载</button>
      <button onClick={show}>点我展示</button>
    </div>
  )
}

export default Demo